<template>
  <div class="login-container">
    <div class="login-in border-box">
      <div class="login-img">
        <img src="../assets/logo@2x.png" alt="logo">
      </div>
      <h2>现场审计作业云平台系统</h2>
      <div class="login-user">
        <el-input
          class="user-name"
          placeholder="请输入账号"
          v-model="userName"
          clearable
          prefix-icon="iconfont icon-user"
          maxlength="20"
        ></el-input>
      </div>
      <div class="login-password">
        <el-input
          class="user-password"
          placeholder="请输入密码"
          v-model="userPassword"
          show-password
          prefix-icon="iconfont icon-password"
          maxlength="20"
        ></el-input>
      </div>
      <div class="btn-login">
        <button class="btn btn-primary" @click="loginIn">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      userName: "",
      userPassword: ""
    };
  },
  created() {
    this.$store.dispatch("setLogin", true);
    console.log(this.$store.getters.getuname);
  },
  methods: {
    loginIn() {
      let _this = this;
      let myreg = /^[a-zA-Z0-9\x21-\x7e]{1,20}$/;
      let myregPassword = /^[a-zA-Z0-9\x21-\x7e]{6,20}$/;
      // if (_this.userName == "" || !myreg.test(_thisuserName)) {
      //     _this.$message.error('用户名输入错误');
      //     return false;
      // }
      // if (_this.userPassword == "" || !myregPassword.test(_this.userPassword)) {
      //     _this.$message.error('密码输入错误');
      //     return false;
      // }
      console.log(1111);

      _this.$router.push({
        path: `/homePage`,
        name: "homePage"
      });
    }
  }
};
</script>

<style lang="less"  scoped>
.login-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("../assets/login@2x.png");
  background-size: 100%;
  .login-in {
    background: #fff;
    width: 670px;
    height: 438px;
    padding: 0 43px 40px 57px;
    position: absolute;
    left: calc(50% - 335px);
    top: calc(50% - 219px);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    h2 {
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #666666;
      letter-spacing: 0;
      text-align: center;
      padding-top: 12px;
    }
    .login-img {
      width: 100%;
      height: 64px;
      padding-top: 30px;
      img {
        width: 64px;
        height: 64px;
        margin: 0 auto;
        display: block;
      }
    }
    .login-user {
      margin-top: 40px;
      .user-name {
        &/deep/.el-input__inner {
          font-size: 16px;
          height: 42px;
          padding-left: 50px;
        }
        &/deep/.el-input__prefix {
          padding: 0 20px 0 10px;
          top: 1px;
          color: #333;
        }
      }
    }
    .login-password {
      margin-top: 40px;
      .user-password {
        &/deep/.el-input__inner {
          font-size: 16px;
          height: 42px;
          padding-left: 50px;
        }
        &/deep/.el-input__prefix {
          padding: 0 20px 0 10px;
          top: 1px;
          color: #333;
        }
      }
    }
    .btn-login {
      margin-top: 40px;
      button {
        width: 100%;
        height: 52px;
        text-align: center;
        font-size: 20px;
      }
    }
  }
}
</style>